<script setup lang="ts">
import { ref,onActivated, onDeactivated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

const count = ref(0)

onBeforeMount(() => {
    console.log("%c Line:5 🍧", "color:#fca650", 'onBeforeMount');
  // called before initial render
})

onMounted(() => {
    console.log("%c Line:10 🍧", "color:#2eafb0", 'onMounted');
  // called after initial render
})

onBeforeUpdate(() => {
    console.log("%c Line:15 🍧", "color:#fca650", 'onBeforeUpdate');
  // called before every re-render
})

onUpdated(() => {
    console.log("%c Line:20 🍧", "color:#2eafb0", 'onUpdated');
  // called after every re-render
})

onBeforeUnmount(() => {
    console.log("%c Line:25 🍧", "color:#fca650", 'onBeforeUnmount');
  // called before unmount
})

onUnmounted(() => {
    console.log("%c Line:30 🍧", "color:#2eafb0", 'onUnmounted');
  // called after unmount
})

onActivated(() => {
    console.log("%c Line:7 🍧", "color:#fca650", 'onActivated');
  // called on initial mount
  // and every time it is re-inserted from the cache
})

onDeactivated(() => {
    console.log("%c Line:13 🍧", "color:#2eafb0", 'onDeactivated');
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }}</span>
  <button @click="count++">+</button>
</template>
